<template>
  <div class="crud-opts">
    <span class="crud-opts-left">
      <!--左侧插槽-->
      <slot name="left"/>
      <el-button
          v-if="showAdd"
          class="filter-item"
          type="primary"
          icon="Plus"
          @click="$emit('toAdd')"
          v-permission="permission.add"
      >
        新增
      </el-button>
      <el-button
          v-if="showEdit"
          class="filter-item"
          type="success"
          icon="Edit"
          :disabled="selections.length !== 1"
          @click="$emit('edit')"
          v-permission="permission.edit"
      >
        修改
      </el-button>
      <el-button
          v-if="showDel"
          slot="reference"
          class="filter-item"
          type="danger"
          icon="Delete"
          :disabled="selections.length === 0"
          :loading="delLoading"
          @click="toDelete"
          v-permission="permission.del"
      >
        删除
      </el-button>
      <slot name="right"/>
    </span>
    <el-button-group class="crud-opts-right">
      <el-button
          plain
          type="info"
          icon="Search"
          @click="toggleSearch()"
      />
      <el-button
          icon="Refresh"
          @click="$emit('refresh')"
      />
    </el-button-group>
  </div>
</template>
<script setup>
import {computed,ref} from 'vue'
import mixins from "@/mixins/mixins";
import {deleteMethod} from "@/utils/request";
const  delLoading=ref(false)
const  { toAdd } = mixins()
import {ElMessageBox } from 'element-plus'

const props = defineProps({
  delUrl: {},
  showSearch: {
    required: true,
    default: true
  },
  selections: {
    type: Array,
    default: []
  },
  showAdd: {
    type: Boolean,
    default: true
  },
  showEdit: {
    type: Boolean,
    default: true
  },
  showDel: {
    type: Boolean,
    default: true
  },
  permission:{
    type: Object,
    default: {}
  }
})

const emit = defineEmits();
const showSearchModel = computed({
  get() {
    return props.showSearch
  },
  set(val) {
    emit('update:showSearch', val)
  }
})

function toggleSearch() {
  showSearchModel.value = !showSearchModel.value
}

function  toDelete(){

  ElMessageBox.confirm(
      '确认删除选中的数据?此操作无法撤销!',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        let idList=props.selections.map(item=>item.id)
        delLoading.value=true
        deleteMethod(props.delUrl,idList).then(res=>{
          delLoading.value=false
          emit('refresh')
        })
      })



}
</script>


<!--<script>-->

<!--import {deleteMethod} from "@/utils/request";-->

<!--export default {-->
<!--  props: {-->
<!--    selections: {-->
<!--      type: Array,-->
<!--      default: []-->
<!--    },-->
<!--    delUrl: {}-->

<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      delLoading: false-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    toAdds() {-->
<!--      this.$emit("toAdds")-->
<!--    },-->
<!--    toDelete() {-->
<!--      this.$confirm(`确认删除选中的${this.selections.length}条数据?`, '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(() => {-->
<!--        this.delLoading = true-->
<!--        var idList = []-->
<!--        this.selections.forEach(item => {-->
<!--          idList.push(item.id)-->
<!--        })-->
<!--        console.log('asdd', this.selections, idList);-->
<!--        deleteMethod(this.delUrl, idList).then(res => {-->
<!--          this.delLoading = false-->
<!--          this.$emit("refresh")-->
<!--        }).catch(() => {-->
<!--          this.delLoading = false-->
<!--        })-->
<!--      }).catch(() => {-->
<!--        this.delLoading = false-->
<!--      })-->
<!--    },-->
<!--    toggleSearch() {-->
<!--      this.$emit("valueChange", "showSearch", !this.showSearch)-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<style>
.crud-opts {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}

.crud-opts .crud-opts-right span {
  float: left;
}
</style>
